<template>
  <div class="nav-header">
    <i
      class="fold-menu"
      :class="isFold ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
      @click="handleFold"
    ></i>
    <div class="content">
      <nf-breadcrumb :breadcrumbs="breadcrumbs" />
      <div class="user-info">
        <i class="el-icon-chat-dot-round right-icon"></i>
        <i class="el-icon-collection-tag right-icon"></i>
        <i class="el-icon-bell right-icon"></i>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar
              size="small"
              src="https://portrait.gitee.com/uploads/avatars/user/2506/7520792_coderdnf_1595322320.png!avatar60"
              class="avatar"
            ></el-avatar>
            <span class="user-name">{{ userName }}</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-s-tools">设置</el-dropdown-item>
              <el-dropdown-item icon="el-icon-user-solid"
                >用户信息</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-error" @click="handleExitClick"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from '@/store';

import NfBreadcrumb from '@/base-ui/breadcrumb';
import { pathMapBreadcrumbs } from '@/utils/map-menu';

import localCache from '@/utils/cache';

export default defineComponent({
  components: {
    NfBreadcrumb
  },
  emits: ['foldChange'],
  setup(props, { emit }) {
    // store
    const store = useStore();
    const userName = computed(() => store.state.login.userInfo.name);

    // data
    const isFold = ref(false);

    // event handle
    const handleFold = () => {
      isFold.value = !isFold.value;
      emit('foldChange', isFold.value);
    };

    // 面包屑数据： [{name: , path: }]
    const breadcrumbs = computed(() => {
      const userMenus = store.state.login.userMenus;
      const route = useRoute();
      const currentPath = route.path;
      return pathMapBreadcrumbs(userMenus, currentPath);
    });

    // 退出登录
    const router = useRouter();
    const handleExitClick = () => {
      localCache.deleteCache('token');
      router.push('/main');
    };

    return {
      userName,
      isFold,
      handleFold,
      breadcrumbs,
      handleExitClick
    };
  }
});
</script>

<style scoped lang="less">
.nav-header {
  display: flex;
  width: 100%;
  .fold-menu {
    font-size: 30px;
    cursor: pointer;
  }

  .content {
    display: flex;
    flex: 1;
    padding: 0 20px;
    justify-content: space-between;
    align-items: center;

    .user-info {
      display: flex;
      align-items: center;
      .right-icon {
        font-size: 18px;
        padding: 0 8px;
        cursor: pointer;
      }
    }

    .el-dropdown-link {
      cursor: pointer;
      display: flex;
      align-items: center;

      .avatar {
        margin-left: 7px;
      }
      .user-name {
        padding: 0 5px;
      }
    }
  }
}
</style>
